<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>NXU 地图（三角洲版）</title>
    <link rel="stylesheet" href="assets/index.css">
    <style id="css-map-size"></style>
    <script src="assets/js/snapdom.js"></script>
    <script src="assets/index.js"></script>
</head>
<body>
    <div id="map-container">
        <div id="map">
            <!-- 地图图片作为背景 -->
            <img src="assets/img/map/wencui.png" alt="地图" id="map-img">
            
            <!-- 图标将通过JavaScript动态添加 -->
        </div>
    </div>

    <!-- 缩放控制 -->
    <div class="zoom-control">
        <div class="zoom-btn" id="zoom-in">+</div>
        <div class="zoom-slider-container">
            <div class="zoom-slider-track">
                <div class="zoom-slider-fill" id="zoom-slider-fill"></div>
            </div>
            <div class="zoom-slider-thumb" id="zoom-slider-thumb"></div>
        </div>
        <div class="zoom-btn" id="zoom-out">-</div>
    </div>

    <!-- 弹出窗口 -->
    <div class="popup" id="info-popup">
        <div class="popup-header">
            <div class="popup-title" id="popup-title">标题</div>
            <div class="popup-close" id="popup-close">×</div>
        </div>
        <div class="popup-content" id="popup-content">
            内容将在这里显示
        </div>
    </div>

    <!-- 移动端横屏提示 -->
    <div id="orientation-message">
        请将设备横屏以获得最佳体验<br />微信可点击右上角使用浏览器打开
    </div>
    
    <!-- 功能按钮 -->
    <div class="function-buttons">
        <button id="export-image-btn" class="function-btn">导出图片</button>
        <button id="select-map-btn" class="function-btn">选择地图</button>
    </div>
    
    <!-- 地图选择弹窗 -->
    <div class="popup" id="map-select-popup">
        <div class="popup-header">
            <div class="popup-title" id="map-select-title">选择地图</div>
            <div class="popup-close" id="map-select-close">×</div>
        </div>
        <div class="popup-content">
            <div class="map-selection-container">
                <div class="map-option" data-map-id="wencui">
                    <div class="map-preview" style="background-image: url('assets/img/map/wencui.png');"></div>
                    <div class="map-name">文萃校区</div>
                </div>
                <div class="map-option" data-map-id="helanshan">
                    <div class="map-preview"  style="background-image: url('assets/img/map/helanshan.png');"></div>
                    <div class="map-name">贺兰山校区</div>
                </div>
                <div class="map-option" data-map-id="huaiyuan">
                    <div class="map-preview"  style="background-image: url('assets/img/map/huaiyuan.png');"></div>
                    <div class="map-name">怀远校区</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>